/* Styles for two boxes :
  - the commercial boxes enabling to display
  commercial or help information.
  - the board boxes enabling to display synthesis
  information on the system or user data.
The box is always displayed on
a page (it is not a popup) */
/* The box container */
.commercialBox,.boardBox {
	border: 1px solid #cacaca;
	padding: 0;
	display: inline-block;
	width: 360px;
	height: 130px;
	margin: 11px 23px 15px 0;
	vertical-align: top;
	color: #333333;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-top-left-radius: 10px; /* pour Chrome */
	-webkit-border-top-right-radius: 10px; /* pour Chrome */
	-webkit-border-bottom-left-radius: 10px; /* pour Chrome */
	-webkit-border-bottom-right-radius: 10px; /* pour Chrome */
}

.commercialBox.endOfLine,.boardBox.endOfLine {
	margin-right: 0;
}

.commercialBox { /* Gradient background and shadows*/
	background-color: white;
	filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 1,
		startColorstr = #f7f7f7, endColorstr = #ffffff ) progid :
		DXImageTransform.Microsoft.Shadow ( color = #f5f5f5, direction = 0,
		strength = 6 ) progid : DXImageTransform.Microsoft.Shadow ( color =
		#eeeeee, direction = 90, strength = 12 ) progid :
		DXImageTransform.Microsoft.Shadow ( color = #eeeeee, direction = 180,
		strength = 12 ) progid : DXImageTransform.Microsoft.Shadow ( color =
		#f5f5f5, direction = 270, strength = 6 );
	background: -webkit-gradient(radial, 0 0, 0, 450 450, 450, from(#f6f6f6),
		to(white) );
	background: -moz-radial-gradient(0 0, circle farthest-side, #f6f6f6, white);
	/* Shadows */
	-moz-box-shadow: 3px 3px 16px #dedede;
	-webkit-box-shadow: 3px 3px 16px #dedede;
	box-shadow: 3px 3px 16px #dedede;
}

.boardBox { /* Gradient background and shadows*/
	background-color: white;
	filter: progid : DXImageTransform.Microsoft.gradient ( GradientType = 1,
		startColorstr = #ffffff, endColorstr = #f7f7f7 ) progid :
		DXImageTransform.Microsoft.Shadow ( color = #f5f5f5, direction = 0,
		strength = 3 ) progid : DXImageTransform.Microsoft.Shadow ( color =
		#eeeeee, direction = 90, strength = 6 ) progid :
		DXImageTransform.Microsoft.Shadow ( color = #eeeeee, direction = 180,
		strength = 6 ) progid : DXImageTransform.Microsoft.Shadow ( color =
		#f5f5f5, direction = 270, strength = 3 );
	background: -webkit-gradient(radial, 100% 100%, 0, 450 450, 450, from(#f6f6f6),
		to(white) );
	background: -moz-radial-gradient(100% 100%, circle farthest-side, #f6f6f6, white);
	/* Shadows */
	-moz-box-shadow: 2px 2px 6px #dedede;
	-webkit-box-shadow: 2px 2px 6px #dedede;
	box-shadow: 2px 2px 6px #dedede;
}

.commercialBox .content,.boardBox .content {
	padding: 3%;
	background-repeat: no-repeat;
	height: 79%;
}

/* The title */
.commercialBox h4,.boardBox h4 {
	padding: 80px 0px 0px 0px;
	margin: 0;
	font-size: 16px;
	font-weight: bold;
}

.commercialBox h4 {
	width: 60%;
}

.boardBox h4 em {
	float: left;
	display: inline-block;
	color: #FF6600;
	font-weight: bold;
	font-size: 64px;
	margin: -40px 10px 0 0;
	height: 64px;
}

/* The commercial box title link */
.commercialBox h4 a {
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	background: transparent url("../../img/big_arrow.gif") no-repeat left
		4px;
	padding-left: 20px;
	display: inline-block;
}

.commercialBox h4 a:hover {
	text-decoration: underline;
}

/* The commercial box category */
.commercialBox div.category {
	font-weight: normal;
	margin: 44px 22px 0 0;
	padding: 0;
	float: left;
	font-size: 26px;
	color: #bbb;
	line-height: 18px;
	text-align: left;
}

/* The commercial box footer link */
.commercialBox p.moreInfo {
	margin: 0 0 5px 0;
	padding: 0;
}

.commercialBox p.moreInfo a {
	font-weight: bold;
	margin-left: 9px;
}

.clickable {
   cursor: pointer;
}

.clickable:hover{
	background:#EEEEFF;
	/*text-shadow:1px 1px 1px #0d4f6b;
	background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#9660CD)); */
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-moz-box-shadow:0 0 5px #9660CD;
	-webkit-box-shadow:0 0 5px #9660CD;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	/*  border: 1px solid #9660CD; */
}

/* The boxMan box */
#boxMan .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}
/* The boxWoman box */
#boxWoman .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}
/* The boxChild box */
#boxChild .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}
/* The boxBodyCare box */
#boxBodyCare .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}
/* The boxBooks box */
#boxBooks .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}
/* The boxAccessories box */
#boxAccessories .content {
  background-image:url('../../img/box-fleet.gif');
  background-position:right 0px;
}